<!-- 实名认证 -->
<template>
  <el-card class="card-bottom">
    <FormTable :parameter="parameter" :formList="formList" @onquery="onquery" @onReset="onReset"></FormTable>
  </el-card>
  <el-card>
    <el-descriptions title="实名认证申请列表"></el-descriptions>
    <PageTable ref="tableRef" :column="column" :parameter="parameter" :query="GetRealAuthListApi">
      <template #realAuthStatus="{ row }">{{ realAuthStatusTyoe[row.realAuthStatus] }}</template>
      <template #action="{ row }">
        <el-button v-if="row.realAuthStatus !== 1" @click="check(row)">查看</el-button>
        <el-button v-else @click="check(row)" type="primary">审核</el-button>
      </template>
    </PageTable>
  </el-card>
  <!-- 添加弹窗 -->
  <el-dialog v-model="AddDialog" title="查看" width="25%" :before-close="handleClose">
    <el-descriptions :column="1">
      <el-descriptions-item label="用户昵称">{{ formLabelAlign.username }}</el-descriptions-item>
      <el-descriptions-item label="真实姓名">{{ formLabelAlign.idCardName }}</el-descriptions-item>
      <el-descriptions-item label="联系方式">{{ formLabelAlign.phoneNumber }}</el-descriptions-item>
      <el-descriptions-item label="身份证号">{{ formLabelAlign.idCardNumber }}</el-descriptions-item>
      <el-descriptions-item label="身份证">
        <div class="img">
          <el-image :preview-src-list="[formLabelAlign.idCardHeadPortrait]" :preview-teleported="true"
            style="width: 148px; height: 148px ;margin-right: 10px;" :src="formLabelAlign.idCardHeadPortrait"
            fit="fill" />
          <el-image :preview-src-list="[formLabelAlign.idCardNationalEmblem]" :preview-teleported="true"
            style="width: 148px; height: 148px" :src="formLabelAlign.idCardNationalEmblem" fit="fill" />
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="审核备注">
        <el-input v-if="formLabelAlign.realAuthStatus === 1" autosize v-model="formLabelAlign.rejectReason"
          style="width:400px" type="textarea" placeholder="请输入" />
        <span v-else>{{ formLabelAlign.rejectReason }}</span>
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <span class="dialog-footer">
        <el-button v-if="formLabelAlign.realAuthStatus !== 1" @click="handleClose">关闭</el-button>
        <template v-else>
          <el-button @click="save(false)">审核拒绝</el-button>
          <el-button type="primary" @click="save(true)">审核通过</el-button>
        </template>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>

import { reactive, ref, defineComponent } from "vue";
import FormTable from '@/components/FormTable'
import PageTable from '@/components/PageTable'
import { ElMessage, ElMessageBox } from 'element-plus'
import { GetRealAuthListApi, AuditRealAuthListApi } from "@/api/RealAuth";


defineComponent({
  components: {
    FormTable,
    PageTable
  }
})

const realAuthStatusTyoe = {
  0: '未认证',
  1: '审核中',
  2: '审核失败',
  3: '已认证'
}

const AddDialog = ref(false)
//弹窗form
const formLabelAlign = ref({
  username: null,
  phoneNumber: null,
  idCardName: null,
  idCardNumber: null,
  idCardNationalEmblem: null,
  idCardHeadPortrait: null,
  rejectReason: null,
})

const parameter = reactive({
  username: null,
  phoneNumber: null,
  realAuthStatus: null
})

const formList = ref([
  {
    type: 'input',
    label: '申请人昵称',
    code: 'username',
  },
  {
    type: 'input',
    label: '联系方式',
    code: 'phoneNumber',
  },
  {
    type: 'select',
    label: '审核状态',
    options: [
      { label: '未认证', value: 0 },
      { label: '审核中', value: 1 },
      { label: '审核失败', value: 2 },
      { label: '已认证', value: 3 },
    ],
    code: 'realAuthStatus',
  },
])
const column = [
  { label: '申请人昵称', prop: 'username' },
  { label: '联系方式', prop: 'phoneNumber' },
  { label: '真实姓名', prop: 'idCardName' },
  { label: '身份证号', prop: 'idCardNumber' },
  { label: '审核状态', slots: 'realAuthStatus' },
  { label: '申请时间', prop: 'realAuthApplyTime' },
  { label: '审核时间', prop: 'realAuthAuditTime' },
  { label: '操作', slots: 'action' },
]

// 搜索条件查询
const tableRef = ref()
function onquery() {
  tableRef.value.refresh()
}
function onReset() {
  parameter.username = null
  parameter.phoneNumber = null
  parameter.realAuthStatus = null
  tableRef.value.refresh(true)
}

function check(row) {
  formLabelAlign.value = row
  AddDialog.value = true
}

//弹窗关闭
function handleClose() {
  AddDialog.value = false
  formLabelAlign.value = {
    username: null,
    phoneNumber: null,
    idCardNumber: null,
    idCardNationalEmblem: null,
    idCardHeadPortrait: null,
    rejectReason: null,
  }
  tableRef.value.refresh()

}


//审核通过
async function save(flag) {
  ElMessageBox.confirm(
    `确认${flag ? '审核通过' : '拒绝'} 吗 ? `,
    '审核',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    await AuditRealAuthListApi({
      memberInfoId: formLabelAlign.value.memberInfoId,
      passFlag: flag,
      rejectReason: formLabelAlign.value.rejectReason
    })
    ElMessage({
      message: `${flag ? '审核' : '拒绝'}成功`,
      type: 'success',
    })
    tableRef.value.refresh()
    handleClose()
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消成功',
    })
  })

}
</script>

<style scoped lang="scss">
.balanceType {
  width: 44px;
  height: 24px;
  border-radius: 4px;
  text-align: center;
  line-height: 24px;
}

.img {
  margin: -20px 0 0 72px;
}
</style>